<template>
  <div class="common-layout" >
    <el-container>
      <el-aside class="aside" width="200px">
        <el-col :span="12">
          <!-- <h5 class="mb-2">OMINI回收平台-PC端</h5> -->
          <el-menu width="200px" @select="selectElement" unique-opened class="el-menu-vertical-demo"
            :default-active="defaultRouter" :collapse="isCollapse"  >
            <el-menu-item index="/">
              <Icon name="HomeFilled"></Icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu v-for="(item, index) in data" :key="item.id" :index="index + ''">
              <template #title>
                <Icon :name="item.icon"></Icon>
                <span>{{ item.list }}</span>
              </template>
              <el-menu-item v-for="sonItem in item.child" :key="sonItem.id" :index="sonItem.frontPath">
                <!-- <Icon :name="sonItem.icon"></Icon> -->
                {{ sonItem.name }}
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-aside>

      <el-container>
        <el-header class="header">
          <!-- <div class="headicon" @click="fold">
            <el-icon>
              <Fold />
            </el-icon>
          </div> -->
          <HeaderVue></HeaderVue>
        </el-header>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import HeaderVue from "./Header.vue";
import Icon from "../components/Icon.vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const route = useRoute();
const data = [
  {
    list: "订单管理",
    child: [
      {
        name: "回收订单管理",
        id: 21,
        frontPath: "/recycleOrder/admin",
      },
      {
        name: "兑换订单管理",
        id: 22,
        frontPath: "/conversionOrder/admin",
      },
    ],
    id: 2,
    icon: "Refresh",
  },
  {
    list: "设备管理",
    child: [
      {
        name: "设备申请",
        id: 31,
        frontPath: "/equipment/apply",
      },
      {
        name: "设备管理",
        id: 32,
        frontPath: "/equipment/admin",
      },
      {
        name: "设备监控",
        id: 33,
        frontPath: "/equipment/monitoring",
      },
    ],
    id: 3,
    icon: "Grid",
  },
  {
    list: "库存管理",
    child: [
      {
        name: "库存管理",
        id: 41,
        frontPath: "/inventory/admin",
      },
    ],
    id: 4,
    icon: "Film",
  },
  {
    list: "财务管理",
    child: [
      {
        name: "钱包管理",
        id: 51,
        frontPath: "/wallet/admin",
      },
      {
        name: "财务核销",
        id: 52,
        frontPath: "/finance/charge",
      },
    ],
    id: 5,
    icon: "Coin",
  },
  {
    list: "系统管理",
    child: [
      {
        name: "门店管理",
        id: 61,
        frontPath: "/shop/admin",
        icon: "House",
      },
      {
        name: "成员管理",
        id: 62,
        frontPath: "/member/admin",
        icon: "House",
      },
      {
        name: "接单管理",
        id: 63,
        frontPath: "/orders/admin",
        icon: "House",
      },
    ],
    id: 6,
    icon: "Setting",
  },
];
function selectElement(index) {

  router.push(index);
}
const defaultRouter = ref(route.path);

const isCollapse = ref(false)

// function fold() {
//   isCollapse.value = false
//   console.log(111);
// }

onBeforeRouteUpdate((to, from) => {
  defaultRouter.value = to.path;
});
</script>

<style lang="less" scoped>
.common-layout {
  height: 100vh;
  overflow: hidden;
}

.el-menu-vertical-demo {
  width: 200px;
  height: 100vh;
}

.header {
  padding: 0;
  position: relative;

  .headicon {
    position: absolute;
    top: 0px;
    left: 0;
    font-size: 22px;
    color: white;
  }
}

.main {
  padding: 0;
  height: 90vh;
}

.mb-2 {
  width: 200px;
  font-size: 18px;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  color: #5e72e4;
}
</style>
